<template>
	<view>
		<cu-custom bgColor="bg-gradual-white">
			<block slot="content">发现</block>
		</cu-custom>
		<scroll-view scroll-x class="nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in headline" :key="index" @tap="tabSelect" :data-id="index">
				{{item}}
			</view>
		</scroll-view>
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.image" mode="aspectFill" style="obeject-fit:cover"></image>
				</view>
			</swiper-item>
		</swiper>
		<recommned v-if="TabCur == 0" :data = "data"></recommned>		
		<rank v-if="TabCur == 1"></rank>
	</view>
</template>

<script>
	import rank from './rank.vue'
	import recommned from './recommned.vue'
	export default {
		data() {
			return {
				cardCur: 0,
				TabCur: 0,
				headline: ['推荐','排行榜'], //发现的顶部导航栏
				swiperList: [],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				data:[]
			};
		},
		props:{
			dataurl:{
				type: String,
				default: ''
			}
		},
		components: {
			rank,
			recommned
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
		},
		methods: {
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		
			async getData() {
				const res = await this.$https.get('/rest/Hero')
				this.data = res.data
				const result = await this.$https.get('/rest/Advertise')
				this.swiperList = result.data
				console.log(this.swiperList,'swi')
			},
			getUrl() {
				if (this.dataurl == 'rank') {
					this.TabCur = 1
				}
				if (this.dataurl == 'recommned') {
					this.TabCur = 0
				}
			}
		},
		onShow() {
			this.getData()
		},
		created() {
			this.getUrl()
			this.getData()
		}
	}
</script>

<style scoped>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
